<template>
  <div class="pie-container" ref="mileage"></div>
</template>
<script>
import { EleResize } from "@/utils/resize/index.js";
let mileageEcharts = null;
let flag = false;
export default {
  props: {
    pieData: {
      type: Array,
      required: true,
    },
    allEle:{
      type: String,
      required: true,
    },
    unit: {
      type: String,
    },
  },
  data() {
    return {
      mileageEcharts: "", //行驶里程分布echarts
      newPieData: [],
      allEleNum:"",
      option: "",
      startCharts: null,
    };
  },
  watch: {
    allEle: {
      handler(data) {
        this.allEleNum = data;
      },
      immediate: true,
      deep: true, // 如果是对象要深度监听
    },
    pieData: {
      handler(newData, oldData) {
        this.newPieData = newData;
        if (this.newPieData && this.newPieData.length > 0) {
          this.$nextTick(() => {
            this.pie();
          });
        }
      },
      immediate: true,
      deep: true, // 如果是对象要深度监听
    },

  },
  methods: {
    pie() {
      this.$nextTick(() => {
        // var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
        let _this = this;
        let index = 0;
        let isSet = false;
        // if (this.startCharts) {
        //   mileageEcharts.dispose();
        //   mileageEcharts = null;
        // }

        mileageEcharts = this.$echarts.init(this.$refs.mileage);
        mileageEcharts.dispose();
        mileageEcharts = this.$echarts.init(this.$refs.mileage);
        mileageEcharts.clear();
        mileageEcharts.resize();
        const colorList = [
          "#FCBA62",
          "#00FFF0",
          "#1d8cff",
          "#00ff00",
          "#ba6eff",
        ];
        const sum = this.newPieData.reduce((per, cur) => per + cur.value, 0);
        const gap = (1 * sum) / 100;
        const pieData1 = [];
        const allNum = this.allEleNum;
        for (let i = 0; i < this.newPieData.length; i++) {
          pieData1.push({
            ...this.newPieData[i],
            itemStyle: {
              // shadowColor: colorList[i],
              // shadowBlur: 10,
              // // shadowOffsetY: 2,
              // shadowOffsetX: 0,
              // borderColor: colorList[i],
              // borderWidth: 2,
            },
          });
        }
        let option = {
          animation: true,
          grid: {
            width: "auto",
            height: "auto",
          },
          left: "60%",
          right: "10%",
          top: "center",
          // right: "center",
          bottom: "center",
          backgroundColor: "rgba(0,0,0,0)",
          title: [
            {
              text: "电池总数",
              left: "29%",
              top: "40%",
              textAlign: "center",
              textStyle: {
                fontSize: "16%",
                fontWeight: "400",
                color: "#A5B6C8",
                textAlign: "center",
                textShadowColor: "#000",
                textShadowBlur: "1",
                textShadowOffsetX: 1,
                textShadowOffsetY: 1,
              }
            }, {
              text: allNum,
              left: "29%",
              top: "50%",
              textAlign: "center",
              textStyle: {
                fontSize: "20%",
                fontWeight: "400",
                color: "#fff",
                textAlign: "center",
                textShadowColor: "#000",
                textShadowBlur: "1",
                textShadowOffsetX: 1,
                textShadowOffsetY: 1,
              },
            },
          ],
          legend: {
            origin: "horizontal",
            left: "54%",
            right: "10%",
            top: "12%",
            align: "left",
            itemWidth: 20,
            itemHeight: 12,
            shadowBlur: 5,
            shadowOffsetY: 0,
            shadowOffsetX: 0,
            itemGap: 20,
            selectedMode: false,
            textStyle: {
              color: "#D8DDE3",
              rich: {
                name: {
                  width: "500",
                  align: "left",
                  fontSize: "14%",
                  color: "#D8DDE3"
                },
              },
            },
            formatter: (name) => {
              const item = this.newPieData.find((i) => {
                return i.name === name;
              });
              // console.log(167,item)
              return "{name|" + name + "  " + item.value + this.unit + "}";
            },
          },
          color: colorList,
          series: [
            {
              type: "pie",
              z: 4,
              left: "-2.8%",
              avoidLabelOverlap: false,
              silent:true,
              radius: ["50%", "70%"],
              center: ["32%", "50%"],
              label: {
                show: true,
                position: "outside",
              },
              labelLine: {
                length: 10,
                length2: 20,
                maxSurfaceAngle: 80,
              },
              emphasis: {
                label: {
                  show: true,
                  rich: {
                    name: {
                      verticalAlign: "top",
                      fontSize: "16%",
                      color: "#000",
                      lineHeight: 20,
                      textShadowColor: "#000",
                      textShadowBlur: 3,
                    },
                  },
                  // formatter: "{b} {c} \n\n",
                  formatter: (item) => {
                    let p = "";
                    if (item.value > 0) {
                      p = ((item.value / sum) * 100).toFixed(1) + "%";
                    } else {
                      p = "0%";
                    }
                    return "{name|" + item.name + "  " + p + "}";
                  },
                  padding: [0, -100],
                  alignTo: "labelLine",
                  minMargin: 5,
                  edgeDistance: 10,
                  lineHeight: 10,
                },
              },
              data: pieData1,
              tooltip: {
                trigger: "item",
              },
            },
            // 边框的设置
            {
              radius: ["58.5%", "58.5%"], //ius: ['69%', '69%'],center: ['35%', '50%']
              center: ["30%", "50%"],
              type: "pie",
              z: 4,
              label: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false,
                },
                emphasis: {
                  show: false,
                },
              },
              animation: false,
              tooltip: {
                show: true,
              },
              // itemStyle: {
              //   normal: {
              //     borderWidth: 40,
              //     borderColor: "rgba(0,0,0,0.5)"
              //   },
              // },
              data: [
                {
                  value: 1,
                },
              ],
            },
          ],
        };
        // 改变屏幕大小图表重新加载
        let resizeDiv = this.$refs.mileage; // 这个是渲染echarts的div
        let listener = () => {
          mileageEcharts.resize();
        };
        EleResize.on(resizeDiv, listener);
        this.option = option;
        option && mileageEcharts.setOption(option, true);

        // 鼠标事件
        let pieChart = mileageEcharts;
        //鼠标移出之后，恢复自动高亮
        // pieChart.on("mouseout", function (param) {
        //   if (!isSet) {
        //     clearInterval(_this.startCharts);
        //     _this.startCharts = setInterval(chartHover, 2000);
        //     flag = true;
        //   }
        // });

        //自动高亮显示
        // var chartHover = function () {
        //   var dataLen = option.series[0].data.length;
        //   // 取消之前高亮的图形
        //   pieChart.dispatchAction({
        //     type: "downplay",
        //     seriesIndex: 0,
        //     dataIndex: index,
        //   });
        //   index = (index + 1) % dataLen;
        //   // 高亮当前图形
        //   pieChart.dispatchAction({
        //     type: "highlight",
        //     seriesIndex: 0,
        //     dataIndex: index,
        //   });
        //   if (option.series[0].data[index].value > 0) {
        //     option.title[0].text =
        //       ((option.series[0].data[index].value / sum) * 100).toFixed(1) +
        //       "%";
        //   } else {
        //     option.title[0].text = "0%";
        //   }
        //   pieChart.setOption(option, true);
        //   // 显示 tooltip
        //   pieChart.dispatchAction({
        //     type: "showTip",
        //     seriesIndex: 0,
        //     dataIndex: index,
        //   });
        // };
        // if (!_this.startCharts) {
        //   _this.startCharts = setInterval(chartHover, 3000);
        // } else {
        //   clearInterval(_this.startCharts);
        //   _this.startCharts = setInterval(chartHover, 3000);
        // }

        // 鼠标移动上去的时候的高亮动画
        // pieChart.on("mouseover", function (param) {
        //   flag = false;
        //   isSet = false;
        //   clearInterval(_this.startCharts);
        //   //取消之前高亮图形
        //   pieChart.dispatchAction({
        //     type: "downplay",
        //     seriesIndex: 0,
        //     dataIndex: index,
        //   });
        //   index = param.dataIndex;
        //   //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
        //   //高亮当前图形
        //   pieChart.dispatchAction({
        //     type: "highlight",
        //     seriesIndex: 0,
        //     dataIndex: param.dataIndex,
        //   });
        //   //显示tooltip
        //   pieChart.dispatchAction({
        //     type: "showTip",
        //     seriesIndex: 0,
        //     dataIndex: param.dataIndex,
        //   });
        //   if (option.series[0].data[index].value > 0) {
        //     option.title[0].text =
        //       ((option.series[0].data[index].value / sum) * 100).toFixed(1) +
        //       "%";
        //   } else {
        //     option.title[0].text = "0%";
        //   }
        //   pieChart.setOption(option, true);
        // });
        // 先执行一遍自适应窗口
        mileageEcharts.resize();
      });
    },
  },
  beforeDestroy() {
    if (mileageEcharts) {
      mileageEcharts.dispose();
      mileageEcharts = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.pie-container {
  width: 100%;
  height: 100%;
}
</style>
